import React, {JSX} from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';
import {BasicText} from '../text';
import {StatusBarHeight} from '../../config/devices';
import BackIcon from '../icon/BackIcon';
import {useNavigation} from '@react-navigation/native';
import { normalize } from '../../utils/adapter';

type Props = {
  LeftSolt?: React.ReactNode;
  RightSolt?: React.ReactNode;
  bgColor?: string;
  title: string;
  color?: string;
};

const BackView = ({color}: {color?: string}): JSX.Element => {
  const navigate = useNavigation();
  return (
    <TouchableOpacity
      style={[styles.left_view]}
      onPress={() => navigate.goBack()}>
      <BackIcon fill={color} />
    </TouchableOpacity>
  );
};

function BasicNavBar({
  LeftSolt,
  RightSolt,
  bgColor,
  title,
  color,
}: Props): JSX.Element {
  return (
    <View
      style={[styles.nav_roo_container, {backgroundColor: bgColor || '#fff'}]}>
      {LeftSolt ? LeftSolt : <BackView color={color} />}
      <View style={styles.content}>
        <BasicText color={color || '#333'} fontSize={16}>
          {title}
        </BasicText>
      </View>
      <View style={styles.right_view}>{RightSolt}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  nav_roo_container: {
    height: normalize(49 + (StatusBarHeight ?? 0)),
    paddingHorizontal: 12,
    paddingTop: StatusBarHeight,
    flexDirection: 'row',
    position: 'relative',
    backgroundColor:'red',
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  left_view: {
    justifyContent: 'center',
    position: 'absolute',
    paddingTop: StatusBarHeight ?? 0,
    height: normalize(49 + (StatusBarHeight ?? 0)),
    left:normalize(10),
  },
  right_view: {
    position: 'absolute',
    right: 10,
    height: normalize(49 + (StatusBarHeight ?? 0)),
    justifyContent: 'center',
    paddingTop: StatusBarHeight ?? 0,
  },
});

export default BasicNavBar;
